<template>
  <a-form-model-item :label="attrObj.formLabel" :prop="attrObj.formProps">
    <a-input
      v-model.trim="formModel[attrObj.formProps]"
      :placeholder="changePlaceholder()"
      :maxLength="attrObj.maxLength"
      :type="attrObj.type"
      :disabled="attrObj.fixedDisabled || attrObj.isDisabled"
      onkeyup="if(type === 'number')value=value.replace(/[^\d]/g,'')"
      @input="intValidator"
      class="form-ipt"
      v-bind="$attrs"
      v-on="$listeners"
    />
  </a-form-model-item>
</template>

<script>
  import { PLACEHOLDER_INPUT } from "@/config/const";
  export default {
    name: "FormInput",
    data() {
      return {
        PLACEHOLDER_INPUT
      };
    },
    props: {
      labelSpan: {
        type: Number,
        default: 6
      },
      attrObj: {
        type: Object,
        default() {
          return {
            formLabel: "",
            formProps: "",
            isDisabled: false,
            maxLength: 20,
            type: '',
            fixedDisabled: false
          };
        }
      },
      formModel: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      intValidator(e){
        if(this.attrObj.type !== 'number' ) return
        let value = e.target.value.toString()
        //判断不要超过位数
        if(value.length > this.attrObj.maxLength ){
          value= value.slice(0, this.attrObj.maxLength)
          this.formModel[this.attrObj.formProps] = value
        }
      },
      changePlaceholder() {
        if (this.attrObj.fixedDisabled) return ''
        if(this.attrObj.isDisabled) return ''
        return PLACEHOLDER_INPUT
      }
    }
  }
</script>

<style lang="less" scoped>
  .form-ipt {
    width: 70%;
  }
  // 去掉input type=number 内部箭头
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type='number'] {
    -moz-appearance: textfield;
  }
</style>
